<script setup>
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import HeaderPage from '@/components/Header/HeaderPage'
import { getTopicPage } from '@/api/Topic.js'
import { topicStore } from '@/store/index.js'
import { useRouter } from 'vue-router';
import { getTopic } from '@/api/Topic.js'
// 控制更多显示隐藏
const showMore=ref(false);
const currentPage = 1
const SkipCount = 0
const pageSize = 6
const router = useRouter()
const small = ref(false)
const disabled = ref(false)
const formModel = ref({})
const getStore = topicStore()
const user =  ref(JSON.parse(localStorage.getItem('userObj')));
const Obj= async()=>{

    const res =  await getTopicPage(SkipCount,pageSize)
    formModel.value = res.data.items
}
Obj()
//更多
const more=()=>{
    showMore.value=!showMore.value;
}
//page-size 改变时触发
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
//current-page 改变时触发
const handleCurrentChange = (val) => {
    SkipCount = val* pageSize
}
//切换题目页面
const newTopic = async (id) =>{
    const res =  await getTopic(id)
    getStore.updateTopic(res.data)
    getStore.isnew = false
    router.push('/container')
}
//新增
const newTopic1 = () =>{
    getStore.isnew = true
    getStore.topic = {topicName:'',topicContent:'',answers:[{answerType:0},{answerType:1},{answerType:2},{answerType:3}],topicInformations:[]}
    router.push('/container')
}


</script>
<template>
<!-- 头部 -->
    <!-- <div class="header">头部区域</div> -->
    <HeaderPage></HeaderPage>
    <div class="bg">
        <el-row :gutter="20" style="margin-bottom:0">
            <el-col :span="8" v-for="(item,index) in formModel" :key="index">
                <el-card @click="newTopic(item.id)" shadow="always" class="card"> 
                    <div class="title">
                        <span></span>
                        <h2>{{ item.topicName }}</h2>
                        <span v-show="user.job =='1'" class="iconfont" @click="more">
                            &#xe600;
                            <div class="absolute_box" v-show="showMore">
                                <p>编辑</p>
                                <p>删除</p>
                            </div>
                        </span>
                        <span v-show="user.job!='1'"></span>
                    </div>
                    <p class="marginTb">{{item.topicContent}}</p>
                </el-card>
            </el-col>
        </el-row>
        <!-- 分页模块 -->
        <div class="pagination">
            <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            background
            :small="small"
            :disabled="disabled"
            layout="total,prev, pager, next, jumper"
            :total="formModel.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
        <!-- 添加题库 -->
        <el-button v-if="user.job == '1'" @click="newTopic1()" type="primary" :icon="Plus" style="width: 343px;height: 60px;font-size:24px">添加题库</el-button>
  </div>
</template>

<style lang="scss" scoped>
.bg{
    box-sizing: border-box;
    padding: 40px 40px 52px 40px;
    min-height: 1000px;
    background: url("@/assets/TopicBackground.png") no-repeat center / cover;
    .el-row {
     margin-bottom: 20px;
    }
    .el-row:last-child {
     margin-bottom: 0;
    }
    .el-col {
        border-radius: 4px;
    }
    .card{
        padding: 5px 0px 37px 0px;
        margin-bottom: 20px;
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .iconfont{
            position: relative;
            width: 28px;
            height: 28px;
            font-size: 28px;
            color: rgb(139, 126, 126);
        }
        p{
            text-align: left;
        }
        .marginTb{
            margin-top: 33px;
            margin-bottom: 23px;
        }
        .absolute_box{
            position: absolute;
            top: 0px;
            right:38px;
            width: 108px;
            border: 1px solid #DDDDDD;
            background-color: #FFFFFF;
            p{
                text-align: center;
                height: 40px;
                line-height: 40px;
                margin: 0;
                color: #FF6000;
            }
            p:nth-child(1){
                color: #1C938F;
                border-bottom: 1px solid #DDDDDD;
            }
        }
    }
    // 分页
    .pagination{
        display: flex;
        justify-content: center;
        margin-top: 10px;
        margin-bottom: 40px;
    }
}
</style>